<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/jquery.min.js"></script>
  <link rel="stylesheet" href="js/layui/css/layui.css">
  <script src="js/loginjs/cunchu.js"></script>
  <script src="js/layui/layui.js"></script>
</head>
<script type="text/javascript">
  URL="http://localhost:8601/";
  var token= localStorage.getExpire("token");
  $(function () {
    getAll();
    kindSave();
    ksave();
  });

  function getAll() {
    layui.use('table', function () {
      var table = layui.table;
      table.reload('test', {
          xhrFields: {
              withCredentials: true
          },
          headers:{"Authorization":token},
        method: 'post',
        url: URL+'kindFindPage',
        where: {
          kind_name: $("#kind_name").val()
        },
        page: true,
        toolbar: '#toolbarDemo'
        //设定异步数据接口的额外参数
        //,height: 300
      });
    });

  }

  function kindSave() {

    layui.use('table', function () {
      var table = layui.table;
      table.on('toolbar(test)', function (obj) {
        switch (obj.event) {
          case 'detail':
            $("#addGoodsForm")[0].reset();
            layui.form.render();
            layer.open({
              type: 1,
              area: ['350px', '280px'],
              content: $('#detail')
            });
            break;
        }
      });
      table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）


        if (layEvent === 'del') { //删除
          layer.confirm('真的删除行么', function (index) {
            obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
            layer.close(index);
              $.ajax({
                  xhrFields: {
                      withCredentials: true
                  },
                  headers:{"Authorization":token},
                  url:URL+"kindDelete",
                  data:{aid: data.kind_id},
                  dataType: 'json',
                  type: 'post',
                  success: function (data) {
                      if(data==1){
                          layer.msg('成功200', {
                              time: 2000 //2秒关闭（如果不配置，默认是3秒）
                          }, function () {
                              location.reload(true);
                          })
                      }else{
                          layer.msg(data.msg, {time: 3000});
                      }
                  }
              })
            //向服务端发送删除指令
          });
        } else if (layEvent === 'edit') {

          layui.use('form', function () {
            var form = layui.form;
            form.val('formTest', data);
          });
          layer.open({
            type: 1,
            area: ['350px', '280px'],
            content: $('#detail')
          });

        }
      });
    });
  }

  function ksave() {
    layui.use('form', function () {
      var form = layui.form;
      //监听提交
      form.on('submit(formDemo)', function (data) {
          $.ajax({
              xhrFields: {
                  withCredentials: true
              },
              headers:{"Authorization":token},
              url: URL+"kindSave",
              dataType: 'json',
              type: "post",
              data:data.field,
              success: function (data) {
                  if(data==1){
                      layer.msg('成功200', {
                          time: 2000 //2秒关闭（如果不配置，默认是3秒）
                      }, function () {
                          location.reload(true);
                      })
                  }else{
                      layer.msg(data.msg, {time: 3000});
                  }
              }
          })
        return false;
      });
    });
  }


</script>
<script type="text/html" id="toolbarDemo">
  <div style="display: block; float: left;margin-right: 20px">
    <input type="text" name="kind_name" id="kind_name" placeholder="请输入种类名称" autocomplete="off"
           class="layui-input" style="width: 300px">
  </div>
  <div>
    <a href="javascript:getAll()"  class="layui-btn layui-btn-sm" lay-event="">搜索</a>
    <a class="layui-btn layui-btn-sm" lay-event="detail">增加</a>
  </div>
</script>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<body>
<div>
  <table class="layui-table" lay-data="{ id:'test'}" lay-filter="test">
    <thead>
    <tr>
      <th lay-data="{field:'kind_id', sort: true}">种类编号</th>
      <th lay-data="{field:'kind_name'}">种类名称</th>
      <th lay-data="{field:'kind_number'}">种类文章数量</th>
      <th lay-data="{fixed: 'right', align:'center', toolbar: '#barDemo'}">编辑</th>
    </tr>
    </thead>
  </table>

</div>
<div style="display: none; " id="detail">
  <form class="layui-form" lay-filter="formTest" id="addGoodsForm">
    <div class="layui-form-item" style="display: none">
      <label class="layui-form-label">种类编号</label>
      <div class="layui-input-inline">
        <input type="text" name="kind_id" placeholder="请输入种类编号" autocomplete="off"
               class="layui-input">
      </div>
    </div>

    <div class="layui-form-item" style="margin-top: 30px">
      <label class="layui-form-label">名称</label>
      <div class="layui-input-inline">
        <input type="text" name="kind_name" placeholder="请输入种类名称" autocomplete="off"
               class="layui-input">
        </select>
      </div>
    </div>
    <!--<div class="layui-form-item">-->
      <!--<label class="layui-form-label">文章数量</label>-->
      <!--<div class="layui-input-inline">-->
        <!--<input type="text" name="kind_number" required lay-verify="required" placeholder="请输入种类文章数量" autocomplete="off"-->
               <!--class="layui-input">-->
      <!--</div>-->
    <!--</div>-->
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" id="formDemo" lay-submit lay-filter="formDemo">立即提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>
</div>

</body>
</html>
